{% extends "../../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/personal_info.css"> 
{% endblock %} 
{% block content %} 
    {% block header%} 
        {% set pageHeaderConf = {pageTitle: __("personal_info_page_title"),level:2} %} 
        {%include "../../_base/page_header.html"%} 
    {% endblock %}
<div class="eui-main-container personal-info-main-container eui--padding-b-0">
    <form class="eui-form eui--font-26 eui--white-bacg">
        <div class="eui-form-group disabled">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_1")}}</label>
            <div class="eui-form-control">
                <input type="text" class="eui-input eui--width-100 eui--font-26" placeholder="{{__('personal_info_input_tips_1')}}">
            </div>
        </div>   
        <div class="eui-form-group disabled">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_2")}}</label>
            <div class="eui-form-control">
                <div class="eui-select-wrap">
                    <select class="eui-select">
                        <option value="">{{__("personal_info_input_tips_2")}}</option>
                        <option value="">{{__("personal_info_sex_male")}}</option>
                        <option value="">{{__("personal_info_sex_female")}}</option>                        
                    </select>
                </div>
                <div class="eui-select-arrow">
                    <span class="eui-icon eui-icon-arrow_down_grey"></span>
                </div>
            </div>            
        </div>     
        <div class="eui-form-group">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_3")}}</label>
            <div class="eui-form-control">
                <div class="eui-select-wrap">
                    <select class="eui-select">
                        <option value="">{{__("personal_info_input_tips_2")}}</option>
                    </select>
                </div>
                <div class="eui-select-arrow">
                    <span class="eui-icon eui-icon-arrow_down_grey"></span>
                </div>
            </div>            
        </div> 
        <div class="eui-form-group disabled">
            <label class="eui-form-label eui--black-color">{{__("area")}}</label>
           <div class="eui-form-control">
                <div class="eui-select-wrap">
                    <select class="eui-select">
                        <option value="">{{__("service_human_role_select_tips")}}</option>
                        <option value="MY">{{__("area_Malaysia")}}</option>
                        <option value="SG">{{__("area_Singapore")}}</option>
                        <option value="ID">{{__("area_Indonesia")}}</option>
                        <option value="PH">{{__("area_Philippines")}}</option>
                        <option value="AU">{{__("area_Australia")}}</option>
                        <option value="US">{{__("area_United_States")}}</option>
                        <option value="TH">{{__("area_Thailand")}}</option>
                        <option value="VN">{{__("area_Vietnam")}}</option>
                        <option value="UK">{{__("area_United_Kingdom")}}</option>
                        <option value="CA">{{__("area_Canada")}}</option>                    
                        <option value="NZ">{{__("area_new_Zealand")}}</option>
                        <option value="DE">{{__("area_Germany")}}</option>
                        <option value="RU">{{__("area_Russia")}}</option>
                        <option value="IT">{{__("area_Italy")}}</option>
                        <option value="FR">{{__("area_France")}}</option>
                        <option value="SA">{{__("area_Saudi_Arabia")}}</option>
                        <option value="UA">{{__("area_Ukraine")}}</option>
                        <option value="TW">{{__("area_Taiwan")}}</option>
                        <option value="HK">{{__("area_HongKong")}}</option>
                        <option value="MO">{{__("area_Macao")}}</option>
                        <option value="OT">{{__("area_other")}}</option>
                    </select>
                </div>
                <div class="eui-select-arrow">
                    <span class="eui-icon eui-icon-arrow_down_grey"></span>
                </div>
            </div>            
        </div>   
        <div class="eui-form-group disabled">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_5")}}</label>            
            <div class="eui-form-control">
                <div class="eui-select-wrap">
                    <select class="eui-select">
                        <option value="">{{__("personal_info_input_tips_2")}}</option>
                    </select>
                </div>
                <div class="eui-select-arrow">
                    <span class="eui-icon eui-icon-arrow_down_grey"></span>
                </div>
            </div> 
        </div>     
        <div class="eui-form-group">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_6")}}</label>
            <div class="eui-form-control eui--clearfix">
                <div class="eui-form-control">
                    <div class="eui-select-wrap">
                        <select class="eui-select">
                            <option value="">{{__("personal_info_input_tips_2")}}</option>
                        </select>
                    </div>
                    <div class="eui-select-arrow">
                        <span class="eui-icon eui-icon-arrow_down_grey"></span>
                    </div>
                </div> 
            </div>
        </div>  
        <div class="eui-form-group">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_8")}}</label>
            <div class="eui-form-control">
                <input type="text" class="eui-input eui--width-100 eui--font-26" placeholder="{{__('personal_info_input_tips_1')}}">
            </div>
        </div>   
        <div class="eui-form-group">
            <label class="eui-form-label eui--black-color">{{__("personal_info_label_9")}}</label>
            <div class="eui-form-control eui--clearfix">
                <div class="preview-img-wrap">
                    <div class="preload-img"></div>
                    <img src="" alt="" class="preview-img">
                </div>
                <div class="preview-img-wrap">
                    <div class="preload-img delete-btn"></div>
                    <img src="{{site.cdn}}/test-question-img-01.jpg" alt="" class="preview-img">
                </div>
                <div class="preview-img-wrap">
                    <div class="preload-img delete-btn"></div>
                    <img src="{{site.cdn}}/test-question-img-02.jpg" alt="" class="preview-img">
                </div>
            </div>
        </div>
        <a href="javascript:;" class="eui-btn submit-btn eui-btn-primary eui-btn-lg">{{__("btn_submit")}}</a>
    </form>
    <div class="eui-screen-wrap eui--text-center">
        <span class="eui-icon eui-icon-gift_big eui--display-b"></span>
        <a href="javascript:;" class="eui-btn eui-btn-danger-outlined eui-btn-sm">{{__("btn_receive_serrated")}}</a>    
    </div>
</div>

{% endblock %}
